<template>
  <div>
    <!--    预览文件-->
    <el-dialog
        v-model="showDialogVisible"
        title="预览"
        width="60%"
        :before-close="handleClose"
        :fullscreen="isFullscreen"

    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">预览</h4>
          <el-icon class="full-screen" @click="isFullscreen=!isFullscreen">
            <svg v-show="!isFullscreen" aria-hidden="true">
              <use xlink:href="#icon-fullScreen"/>
            </svg>
            <svg v-show="isFullscreen" aria-hidden="true">
              <use xlink:href="#icon-cancelFullScreen"/>
            </svg>
          </el-icon>
        </div>
      </template>
      <template #footer>

        <!--        预览图片-->
        <el-image-viewer
            v-if="sysFile.fileType===2"
            :url-list="[getFileUrl(sysFile.path)]"
            show-progress
            :initial-index="0"
            @close="handleClose"
        />

        <!-- 如果文件类型是视频（fileType === 3），则使用视频播放器 -->
        <video
            v-if="sysFile.fileType === 3"
            controls
            :src="getFileUrl(sysFile.path)"
            width="100%"
            @close="handleClose"
        >
          你的浏览器不支持视频播放。
        </video>

        <el-scrollbar :style="styleObj">
          <!--        预览文本文件-->
          <div style="text-align: left;">
            <highlightjs v-if="textContent" :code="textContent"/>
          </div>
        </el-scrollbar>


      </template>
    </el-dialog>

  </div>
</template>
<script>

import 'highlight.js/lib/common';
import hljsVuePlugin from "@highlightjs/vue-plugin";
import 'highlight.js/styles/github-dark.css';

export default {
  components: {
    highlightjs: hljsVuePlugin.component
  }
}
</script>
<script setup>
import {getFileUrl} from "@/hooks/file/sysfile";
import {useTextContent} from "@/hooks/file/text";
import {computed, onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {OFFICE_PREVIEW_PATH} from "@/const/RouterPathConst";

const props = defineProps(["sysFile", "dialogVisible"])
const showDialogVisible = ref(props.dialogVisible)
const emit = defineEmits("closeDialog")

const $router = useRouter();
onMounted(() => {

  let fileType = props.sysFile.fileType;
  if (fileType === 7 || fileType === 10 || fileType === 8) {
    showDialogVisible.value = false;
    emit("closeDialog");
    window.open(`#${OFFICE_PREVIEW_PATH}?path=${props.sysFile.path}&type=${fileType}`, '_blank');
  }
})


const textContent = ref()
useTextContent(props.sysFile).then(resp => {
  textContent.value = resp.data;
})


const handleClose = () => {
  showDialogVisible.value = false
  emit("closeDialog")
}


const isFullscreen = ref(false);

const styleObj = computed(() => {
  return isFullscreen.value ? {} : {
    height: "60dvh"
  }
})

</script>


<style scoped>

video {
  width: 100%;
  height: 100%;
}

.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}

.full-screen {
  fill: #909399;
}

.full-screen:hover {
  fill: #409eff;
}
</style
>